<template>
    <textarea :id="tinymceId" style="visibility: hidden" />
</template>

<script>
/* eslint-disable */
import loadTinymce from '@/util/formGenerator/loadTinymce';
import { plugins, toolbar } from './config';
import { debounce } from 'throttle-debounce';
import { mapState, mapGetters } from 'vuex';
import { uploadFile } from '@/api/common/index';
let num = 1;

export default {
    props: {
        id: {
            type: String,
            default: () => {
                num === 10000 && (num = 1);
                return `tinymce${+new Date()}${num++}`;
            }
        },
        value: {
            default: ''
        }
    },
    data() {
        return {
            tinymceId: this.id,
            hasInit: false,
            hasChange: false
        };
    },
    watch: {
        value(newV, oldV) {
            //当传入值不变化的时候更新富文本内容,
            if (this.hasInit && !this.hasChange) {
                window.tinymce.get(this.tinymceId).setContent(newV);
            }
        }
    },
    mounted() {
        loadTinymce((tinymce) => {
            // eslint-disable-next-line global-require
            require('./zh_CN');
            const _this = this;
            let conf = {
                selector: `#${this.tinymceId}`,
                language: 'zh_CN',
                menubar: 'file edit insert view format table',
                plugins,
                toolbar,
                height: 300,
                branding: false,
                object_resizing: false,
                end_container_on_empty_block: true,
                powerpaste_word_import: 'clean',
                code_dialog_height: 450,
                code_dialog_width: 1000,
                advlist_bullet_styles: 'square',
                advlist_number_styles: 'default',
                default_link_target: '_blank',
                link_title: false,
                nonbreaking_force_tab: true,
                images_upload_url: '/fs/fs/fileUpload',
                images_upload_base_path: '',
                images_upload_handler: (blobInfo, success) => {
                    const img = 'data:image/jpeg;base64,' + blobInfo.base64();
                    success(img);
                }
            };
            conf = Object.assign(conf, _this.$attrs);
            conf.init_instance_callback = (editor) => {
                if (_this.value) {
                    editor.setContent(_this.value);
                }
                _this.hasInit = true;
                editor.on('NodeChange Change KeyUp SetContent', () => {
                    this.hasChange = true;
                    this.$emit('input', editor.getContent());
                });
            };
            tinymce.init(conf);
        });
    },
    destroyed() {
        this.destroyTinymce();
    },

    methods: {
        vModel(editor) {
            // 控制连续写入时setContent的触发频率
            const debounceSetContent = debounce(250, editor.setContent);
            this.$watch('value', (val, prevVal) => {
                if (editor && val !== prevVal && val !== editor.getContent()) {
                    if (typeof val !== 'string') val = val.toString();
                    debounceSetContent.call(editor, val);
                }
            });

            editor.on('change keyup undo redo', () => {
                this.$emit('input', editor.getContent());
            });
        },
        setContent(val) {
            window.tinymce.get(this.tinymceId).setContent(val);
        },
        getContent() {
            window.tinymce.get(this.tinymceId).getContent();
        },
        destroyTinymce() {
            if (!window.tinymce) return;
            const tinymce = window.tinymce.get(this.tinymceId);
            if (tinymce) {
                tinymce.destroy();
            }
        }
    }
};
</script>
